<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="wrapper">
    <div id="formBuilder"></div>
</div>

<script type="text/javascript" charset="utf-8">
YUI({ filter:'raw' }).use(
    'aui-form-builder',
    'aui-form-builder-field-choice',
    'aui-form-builder-field-list',
    'aui-form-builder-field-text',
    'aui-form-builder-field-sentence',
    function(Y) {
        var layout = new Y.Layout({
            rows: [
                new Y.LayoutRow({
                    cols: [
                        new Y.LayoutCol({
                            movableContent: false,
                            size: 12,
                            value: new Y.FormBuilderFieldList({
                                fields: [
                                    new Y.FormBuilderFieldText({
                                        help: 'Type your full name here',
                                        title: 'What\'s your name?'
                                    })
                                ]
                            })
                        })
                    ]
                }),
                new Y.LayoutRow({
                    cols: [
                        new Y.LayoutCol({
                            size: 4,
                            value: new Y.FormBuilderFieldList({
                                fields: [
                                    new Y.FormBuilderFieldChoice({
                                        help: 'Choose one of the options in the list below',
                                        options: ['Male', 'Female'],
                                        title: 'What\'s your gender?',
                                        type: Y.FormFieldChoice.TYPES.CHECKBOX
                                    })
                                ]
                            })
                        }),
                        new Y.LayoutCol({
                            size: 4,
                            value: new Y.FormBuilderFieldList()
                        }),
                        new Y.LayoutCol({
                            size: 4,
                            value: new Y.FormBuilderFieldList()
                        })
                    ]
                }),
                new Y.LayoutRow({
                    cols: [
                        new Y.LayoutCol({
                            size: 12,
                            value: new Y.FormBuilderFieldList({
                                fields: [
                                    new Y.FormBuilderFieldSentence({
                                        nestedFields: [
                                            new Y.FormBuilderFieldText({
                                                help: 'Type the full name of your school here',
                                                title: 'Where did you go to school?'
                                            }),
                                            new Y.FormBuilderFieldText({
                                                help: 'Type the full name of your school here',
                                                title: 'When did you go to that school?'
                                            }),
                                            new Y.FormBuilderFieldChoice({
                                                help: 'Select one of the options below',
                                                options: ['Computer Science', 'Design'],
                                                otherOption: true,
                                                title: 'What is your major?'
                                            })
                                        ],
                                        title: 'Regarding education:'
                                    })
                                ]
                            })
                        })
                    ]
                })
            ]
        });

        var layout2 = new Y.Layout({
            rows: [
                new Y.LayoutRow({
                    cols: [
                        new Y.LayoutCol({
                            movableContent: true,
                            size: 12,
                            value: new Y.FormBuilderFieldList({
                                fields: [
                                    new Y.FormBuilderFieldText({
                                        help: 'Type your full name here',
                                        title: 'What\'s your name?'
                                    }),
                                    new Y.FormBuilderFieldText({
                                        help: 'HELP!!!!',
                                        title: 'Anyone!'
                                    })
                                ]
                            })
                        })
                    ]
                })
            ]
        });

        new Y.FormBuilder({
            fieldTypes: [{
                fieldClass: Y.FormBuilderFieldSentence,
                icon:'glyphicon glyphicon-font',
                label: 'Sentence'
            },{
                fieldClass: Y.FormBuilderFieldChoice,
                icon:'glyphicon glyphicon-font',
                label: 'Choice',
                unique: true
            },{
                fieldClass: Y.FormBuilderFieldText,
                icon:'glyphicon glyphicon-font',
                label: 'Text'
            }],
            layouts: [layout2, layout],
        }).render('#formBuilder');
    }
);

</script>

</body>
</html>
